<template>
  <section class="lastest-mv">
    <section class="filter-wrap">
      <section class="select-wrap">
        <span class="select-type">地区：</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" :class="{active:area=='全部'}" @click="area='全部'">全部</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='内地'}" @click="area='内地'">内地</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='港台'}" @click="area='港台'">港台</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='欧美'}" @click="area='欧美'">欧美</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='日本'}" @click="area='日本'">日本</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='韩国'}" @click="area='韩国'">韩国</span>
          </li>
        </ul>
      </section>
      <section class="select-wrap">
        <span class="select-type">类型：</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" :class="{active:type=='全部'}" @click="type='全部'">全部</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='官方版'}" @click="type='官方版'">官方版</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='原生'}" @click="type='原生'">原生</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='现场版'}" @click="type='现场版'">现场版</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='网易出品'}" @click="type='网易出品'">网易出品</span>
          </li>
        </ul>
      </section>
      <section class="select-wrap">
        <span class="select-type">排序：</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" :class="{active:order=='上升最快'}" @click="order='上升最快'">上升最快</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:order=='最热'}" @click="order='最热'">最热</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:order=='最新'}" @click="order='最新'">最新</span>
          </li>
        </ul>
      </section>
    </section>
    <!-- mv内容区 -->
    <section class="mv-content">
      <ul class="mvs-ul">
        <li
          v-for="(item,index) in mvList"
          :key="index"
          class="mv-item"
          @click="toMvdetailes(item.id)"
        >
          <section class="viewers">
            <i class="el-icon-video-play"></i>
            <span v-text="item.playCount"></span>
          </section>
          <img :src="item.cover" alt />
          <p v-text="item.artistName" class="artist-name"></p>
        </li>
      </ul>
    </section>
    <!-- 分页：total总共条数，current-page当前页，page-size每页条数，current-change页码改变事件 -->
    <section class="page">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="12"
        @current-change="handleCurrentChange"
        :current-page="page"
      ></el-pagination>
    </section>
  </section>
</template>

<script>
import axios from "axios";
import { formattingPlaycount } from "@/api/commend";
export default {
  data() {
    return {
      total: 20,
      page: 1,
      limit: 12,
      area: "全部",
      type: "全部",
      order: "上升最快",
      mvList: [],
    };
  },
  methods: {
    getData() {
      axios({
        method: "get",
        url: "https://autumnfish.cn/mv/all",
        params: {
          area: this.area,
          type: this.type,
          order: this.order,
          limit: this.limit,
          offset: (this.page - 1) * this.limit,
        },
      }).then((res) => {
        if (res.data.count) {
          this.total = res.data.count; //总条数
        }
        this.mvList = formattingPlaycount(res.data.data);
      });
    },
    handleCurrentChange(val) {
      // 保存页码
      this.page = val;
      // 重新获取数组
      this.getData();
    },

    toMvdetailes(id) {
      this.$router.push(`/mvdetails?mvid=${id}`);
    },
  },
  created() {
    this.getData();
  },
  watch: {
    tag() {
      this.page = 1;
      this.getData();
    },
    type() {
      this.page = 1;
      this.getData();
    },
    order() {
      this.page = 1;
      this.getData();
    },
  },
};
</script>

<style lang='scss'>
</style>